import React from 'react';
import ReactDOM from 'react-dom';
//自定义hooks.只要说一个函数以use开头，并且里面调用了别的hooks，
function useRequest(url){
  let limit = 5;//每页的条数
  let [offset,setOffset] = React.useState(0);//偏移量   0,5 5,5
  let [data,setData] = React.useState([]);//真实的用户列表数据
  function loadMore(){
    setData(null);//todo 为了下面 通过此判断 显示<div>加载中.......</div> , 但这样有个问题, 这不会影响下面数据回来了 ...data 吗？ 不会,因为data查找的是我们闭包里的data
    fetch(`${url}?offset=${offset}&limit=${limit}`)
      .then(res=>res.json())//[user1,user2,user3,user4,user5]
      .then(pageData=>{
        debugger
        setData([...data,...pageData]);//[user1,user2,user3,user4,user5]
        setOffset(offset+pageData.length);//5
      })
  }
  //第一次渲染的时候，先调用一次loadMore加载第一页
  //只要你把一个函数放在了 useEffect里，那么肯定会在当前的组件渲染后执行
  React.useEffect(loadMore,[]);
  return [data,loadMore];
}
function App(){
  const [users,loadMore]=useRequest('http://localhost:8000/api/users');
  if(users === null){
    return <div>加载中.......</div>
  }
  return (
    <div>
      <ul>
        {
          users.map((user)=><li key={user.id}>{user.id}:{user.name}</li>)
        }
      </ul>
      <button onClick={loadMore}>加载更多</button>
    </div>
  )
}
ReactDOM.render(<App/>,document.getElementById('root'));
